<!--2019/5/23 8:39. by soft-->
<#assign title="维修员" maintainers='this'>
<#include 'header.ftl'>

<div class="layui-card">
  <div class="layui-card-header">
    <div class="card-title">
      维修员管理
    </div>
    <div class="header-tools">
      <button onclick="methods.add()" class="layui-btn-sm layui-btn layui-btn-normal layui-inline">
        <i class="layui-icon layui-icon-add-circle"></i>添加
      </button>
    </div>
  </div>
  <div class="layui-card-body">
    <table id="tables" lay-filter="tables"></table>
  </div>
</div>

<script type="text/html" id="maintainerBox">
  <div class="layer-dialog-from">
    <form class="layui-form ">
      <input type="hidden" name="id" value="{{d.id?d.id:''}}">
      <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
          <input class="layui-input" name="name" value="{{d.name?d.name:''}}"
                 lay-verify="required" lay-verType="tips" placeholder="姓名"/>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
          <select name="sex">
            <option value="1">男</option>
            <option value="2">女</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-block">
          <input class="layui-input" name="tel" value="{{d.tel?d.tel:''}}"
                 lay-verify="required|phone" lay-verType="tips" placeholder="电话" maxlength="11"/>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
          <input class="layui-input" name="email" value="{{d.email?d.email:''}}"
                 lay-verify="required|email" lay-verType="tips" placeholder="邮箱"/>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">负责楼层</label>
        <div id="floors" class="layui-input-block">
          <select xm-select="floors" xm-select-type="2" xm-select-skin="normal">
            {{# layui.each(d.floors, function(k, v) { }}
            <option value="{{v}}">{{v}}</option>
            {{# }) }}
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
          <select name="status">
            <option value="ENABLE" {{d.status=='在岗'?'selected':''}}>在岗</option>
            <option value="DISABLED" {{d.status=='离职'?'selected':''}}>离职</option>
          </select>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          {{# if (d.id == null) { }}
          <button class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit lay-filter="add">添加</button>
          {{# } else { }}
          <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="edit">保存</button>
          {{# } }}
        </div>
      </div>
    </form>
  </div>
</script>

<script>
  var methods, layerIndex;
  layui.config({
    base: '/static/layui/plugin/'
  }).extend({
    formSelects: 'formSelects-v3'
  }).use(['laytpl', 'table', 'layer', 'form', 'jquery', 'formSelects'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    var $ = layui.$;
    var laytpl = layui.laytpl;
    var formSelects = layui.formSelects;

    var floors = [];

    var $maintainerBox = $('#maintainerBox');

    table.render({
      elem: '#tables',
      method: 'post',
      url: '/admin/maintainer/page',
      page: true,
      cols: [[
        {title: '序号', type: 'numbers'},
        {title: '姓名', field: 'name'},
        {title: '性别', templet: sex},
        {title: '电话', field: 'tel'},
        {title: '邮箱', field: 'email'},
        {
          title: '负责楼层', templet: function (s) {
            var f = '';
            layui.each(s.fs, function (k, v) {
              f += ('<span class="layui-badge layui-bg-cyan">' + v + '</span>');
            })
            return f;
          }
        },
        {title: '状态', templet: maintainerStatus},
        {title: '入职时间', field: 'datetime'},
        {
          title: '操作', templet: function (s) {
            return '<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>' +
                '<button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>'
          }, width: 115
        }
      ]],
      parseData: parseData
    }); // table

    methods = {
      del: function (nt) {
        layer.alert('确定删除维修员【' + nt.name + '】', {title: '确定提示', icon: 3}, function (index) {
          $.post('/admin/maintainer/del/' + nt.id, function (data) {
            layer.msg('删除成功!', {icon: 6, time: 1200})
            table.reload('tables')
          })
          layer.close(index)
        })
      },
      edit: function (h) {
        laytpl($maintainerBox.html()).render($.extend({}, h, {floors: floors}), function (html) {
          methods.dialog(html, '修改维修员信息');
          var sv = [];
          layui.each(h.fs, function (i, v) {
            sv.push(v);
          });
          formSelects.value('floors', sv);
        })
      },
      add: function () {
        laytpl($maintainerBox.html()).render({id: null,floors: floors}, function (html) {
          methods.dialog(html);
        })
      },
      dialog: function (html, title) {
        layerIndex = layer.open({
          type: 1,
          area: ['450px'],
          title: title ? title : '添加维修员',
          content: html
        });
        form.render('select');
      }
    }

    // 事件
    table.on("tool(tables)", function (e) {
      methods[e.event](e.data, e.tr);
    });

    form.on('submit(add)', function (fo) {
      var fd = fo.field;
      fd.fls = formSelects.value('floors', 'val');
      if (authFs(fd.fls)) {
        $.post('/admin/maintainer/add', fd, function (data) {
          if (data.success) {
            layer.msg('添加成功！', {icon: 6, time: 1200});
            layer.close(layerIndex)
            table.reload('tables')
          } else {
            layer.alert(data.msg, {title: '错误详情', icon: 2})
          }
        });
      }
      return false;
    })

    form.on('submit(edit)', function (fo) {
      var fd = fo.field;
      fd.fls = formSelects.value('floors', 'val');
      if (authFs(fd.fls)) {
        $.post('/admin/maintainer/change', fd, function (data) {
          if (data.success) {
            layer.msg('修改成功！', {icon: 6, time: 1200});
            layer.close(layerIndex)
            table.reload('tables')
          } else {
            layer.alert(data.msg, {title: '错误详情', icon: 2})
          }
        });
      }
      return false;
    })

    function authFs(fls) {
      if (fls == null || fls.length <= 0) {
        layer.tips('至少负责一个楼层', '#floors', {tips: 1})
        return false;
      }
      return true;
    }

    // 初始化区
    $.post('/admin/froom/floors', function (data) {
      floors = data.payload;
    })
  });
</script>

<#include 'footer.ftl'>